import React from 'react';
import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import { Select } from 'antd';
import { SkinOutlined } from '@ant-design/icons';

function ThemeSwitcher(props) {
  const { t } = props;
  const onChange = value => {
    console.log("Theme switched: ", value);
  };

  return (
    <Select defaultValue="dark" onChange={onChange} style={{width: 80}} suffixIcon={<SkinOutlined />}>
      <Select.Option key="dark" value="dark">
        {t("Dark")}
      </Select.Option>
    </Select>
  );
}

ThemeSwitcher.propTypes = {
  t: PropTypes.func.isRequired,
}

export default withTranslation("Header")(ThemeSwitcher);
